<template>
	<view style="width: 100vw;height: 100vh;" class="flex flex-direction">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">
				<view class="flex justify-center" style="pointer-events: all;">
					<text @click="switchtab(0)" :style="{color:(current==0?'#007AFF':'#999999')}"
						style="font-size: 32rpx;font-weight: bold;">
						作品
					</text>
					<text @click="switchtab(1)" :style="{color:(current==1?'#007AFF':'#999999')}"
						style="margin-left: 48rpx;font-size: 32rpx;font-weight: bold;">
						粉丝
					</text>
				</view>
			</block>
		</cu-custom>
		<swiper class="flex-sub flex flex-direction" @change="onSwiperChange" :current="current">
			<!-- 作品 -->
		<swiper-item style="height: 100%;" class="flex flex-direction">
		<view class="padding bg-white" style="animation: slide-left 1s ease-in-out;">
			<text style="font-size: 32rpx;font-weight: 600;">概览</text>
			<view class="flex  align-center margin-top " style="width: 100%;">
				<view class="flex flex-direction justify-center flex-sub" v-show="develop" >
                    <text class="margin-bottom-xs">昨日展现量</text>
					<text style="font-size: 38rpx;font-weight: 600;">2.5K</text>
					<text style="color: #999999;" class="margin-top-xs">粉丝展现量：34</text>
				</view>
				<view class="flex flex-direction justify-center flex-sub">
                    <text class="margin-bottom-xs">昨日阅读量</text>
					<text style="font-size: 38rpx;font-weight: 600;">{{lastViewCount}}</text>
					<text style="color: #999999;" class="margin-top-xs">粉丝阅读量：34</text>
				</view>
			</view>
		</view>
		<view class="margin-top bg-white padding margin-bottom" style="animation: slide-right 1.2s ease-in-out;">
			<view class="flex  align-center margin-top " style="width: 100%;">
				<view class="flex flex-direction justify-center flex-sub">
			        <text class="margin-bottom-xs">昨日点赞量</text>
					<text style="font-size: 38rpx;font-weight: 600;">{{lastLikeCount}}</text>
				</view>
				<view class="flex flex-direction justify-center flex-sub" >
			        <text class="margin-bottom-xs">昨日评论量</text>
					<text style="font-size: 38rpx;font-weight: 600;">{{lastComment}}</text>
				</view>
			</view>
		</view>
		<view class="bg-white  flex-sub flex flex-direction" style="animation: slide-bottom 1.4s ease-in;">
		<view class="flex justify-between align-center margin-bottom-xl padding-lr padding-top">
			<text style="font-size: 32rpx;font-weight:600;">流量趋势</text>
			<!-- 选择菜单 -->
			<view style="position: relative;" @click="showOption">
			<input type="text" v-model="value"  disabled  style="background-color: #d3d3d6;font-size: 24rpx;width: 130rpx;height: 60rpx;padding-left: 10rpx;padding-right: 10rpx;">
			<view style="position: absolute;right: 2%;top: 12%;" :class="[showOptions?'no-showOptions':'showOptions']">
			<text class="cuIcon-triangleupfill" style="color: #000000;font-size: 40rpx;"></text>
			</view>
			<view  class="select-options" :class="showOptions?'select-active ':'select-noactive'">
				<view class="select-options-item" v-for="(item,index) in options" :key="index" :class="{active: value === item}" @click="selectOption(item)">{{item}}</view>
			</view>
			</view>
		</view>
		<view class="bg-white flex-sub padding-bottom-xs" @touchmove.stop=""  >
			<qiun-data-charts type="line" :localdata="localdata" :ontouch="true"    />
		</view>
		</view>
		</swiper-item>
		<!-- 粉丝 -->
		<swiper-item style="height: 100%;" class="flex flex-direction">
		<view class="padding bg-white">
			<text style="font-size: 32rpx;font-weight: 600;">概览</text>
			<view class="flex  align-center margin-top " style="width: 100%;">
				<view class="flex flex-direction justify-center flex-sub">
		            <text class="margin-bottom-xs">昨日新增粉丝</text>
					<text style="font-size: 38rpx;font-weight: 600;">0</text>
				</view>
				<view class="flex flex-direction justify-center flex-sub">
		            <text class="margin-bottom-xs">昨日粉丝总量</text>
					<text style="font-size: 38rpx;font-weight: 600;">{{lastFanCount}}</text>
				</view>
			</view>
		</view>
		<view class="bg-white  flex-sub flex flex-direction margin-top">
		<view class="flex justify-between align-center margin-bottom-xl padding-lr padding-top" >
			<text style="font-size: 32rpx;font-weight:600;">流量趋势</text>
			<!-- 选择菜单 -->
			<view style="position: relative;" @click="showOption">
			<input type="text" v-model="value"  disabled  style="background-color: #d3d3d6;font-size: 24rpx;width: 130rpx;height: 60rpx;padding-left: 10rpx;padding-right: 10rpx;">
			<view style="position: absolute;right: 2%;top: 12%;" :class="[showOptions?'no-showOptions':'showOptions']">
			<text class="cuIcon-triangleupfill" style="color: #000000;font-size: 40rpx;"></text>
			</view>
			<view  class="select-options" :class="showOptions?'select-active ':'select-noactive'">
				<view class="select-options-item" v-for="(item,index) in options" :key="index" :class="{active: value === item}" @click="selectOption(item)">{{item}}</view>
			</view>
		    </view>
		</view>
		<view class="bg-white flex-sub padding-bottom-xs" @touchmove.stop=""  >
			<qiun-data-charts type="line" :localdata="localdata" :ontouch="true" />
		</view>
		</view>
		<!-- 占位区 -->
		<view  style="height: 20vh;" class="bg-white"></view>
		</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lastComment:0,//昨日评论量
				lastLikeCount:0,//昨日点赞量
				lastViewCount:0,//昨日阅读量
				lastFanCount:0,//昨日粉丝量
				showOptions:false,//是否展开下拉菜单
				value:"近7天",
				options:["近7天","近30天"],
				current: 0,
				localdata: [],
			}
		},
		onLoad() {
	       this.getdata()
		},
		methods: {
			getChartsData(){
				let promiseArray=[]
				if(this.current==0){
					if(this.value=="近7天"){
						promiseArray.push(new Promise((resolve,reject)=>{
							this.$http.get('/edu/view-content/getWeekViewCount/'+this.$store.getters.userid).then(res =>{							
								// console.log(res)
								let data=res.data.result
								let charts=[]
								Reflect.ownKeys(data).forEach(index =>{
									let obj={}
									obj.text=index.split('-')[1]+'/'+index.split('-')[2]
									obj.value=data[index]
									obj.group="阅读量"
									charts.push(obj)
									
								})
								charts.sort(function(a,b){
									return new Date(a["text"]) - new Date(b["text"])
								})	
								resolve(charts)
							})
						}))
						promiseArray.push(new Promise((resolve,reject)=>{
							this.$http.get('/edu/like/getWeekLikeCount/'+this.$store.getters.userid).then(res =>{
								let data=res.data.result
								let charts=[]
								Reflect.ownKeys(data).forEach(index =>{
									let obj={}
									obj.text=index.split('-')[1]+'/'+index.split('-')[2]
									obj.value=data[index]
									obj.group="点赞量"
									charts.push(obj)
								})
								charts.sort(function(a,b){
									return new Date(a["text"]) - new Date(b["text"])
								})
							    resolve(charts)
							})						
						}))
					  promiseArray.push(new Promise((resolve,reject)=>{
						  this.$http.get('/edu/article/comment/getWeekCommentCount/'+this.$store.getters.userid).then(res=>{
							  let data=res.data.result
							  let charts=[]
							  
							  Reflect.ownKeys(data).forEach(index =>{
							  	let obj={}
							  	obj.text=index.split('-')[1]+'/'+index.split('-')[2]
							  	obj.value=data[index]
							  	obj.group="评论量"
							  	charts.push(obj)
							  })
							  charts.sort(function(a,b){
							  	return new Date(a["text"]) - new Date(b["text"])
							  })
							  resolve(charts)
						  })
					  }))
						
					}
					else{
						promiseArray.push(new Promise((resolve,reject)=>{
							this.$http.get('/edu/like/getMonthCount/'+this.$store.getters.userid).then(res =>{
								let data=res.data.result
								let charts=[]	
								Reflect.ownKeys(data).forEach(index =>{
									let obj={}
									obj.text=index.split('-')[1]+'/'+index.split('-')[2]
									obj.value=data[index]
									obj.group="点赞量"
									charts.push(obj)
								})
								charts.sort(function(a,b){
									return new Date(a["text"]) - new Date(b["text"])
								})
								resolve(charts)
							})
						}))
						promiseArray.push(new Promise((resolve,reject)=>{
							this.$http.get('/edu/view-content/getMonthViewCount/'+this.$store.getters.userid).then(res =>{
								let data=res.data.result
								let charts=[]
								Reflect.ownKeys(data).forEach(index =>{
									let obj={}
									obj.text=index.split('-')[1]+'/'+index.split('-')[2]
									obj.value=data[index]
									obj.group="阅读量"
									charts.push(obj)
								})
								charts.sort(function(a,b){
									return new Date(a["text"]) - new Date(b["text"])
								})
								resolve(charts)
							})	
						}))
						promiseArray.push(new Promise((resolve,reject)=>{
							this.$http.get('/edu/article/comment/getMonthCommentCount/'+this.$store.getters.userid).then(res =>{
								let data=res.data.result
								let charts=[]
								Reflect.ownKeys(data).forEach(index =>{
									let obj={}
									obj.text=index.split('-')[1]+'/'+index.split('-')[2]
									obj.value=data[index]
									obj.group="评论量"
									charts.push(obj)
								})
								charts.sort(function(a,b){
									return new Date(a["text"]) - new Date(b["text"])
								})
								resolve(charts)
							})	
						}))
					}
				}
				else{
					if(this.value=="近7天"){
						promiseArray.push(new Promise((resolve,reject)=>{
							this.$http.get('/ucenter/follow/getWeekFanCount/' +this.$store.getters.userid).then(res =>{
								let data=res.data.result
								let charts=[]
								Reflect.ownKeys(data).forEach(index =>{
									let obj={}
									obj.text=index.split('-')[1]+'/'+index.split('-')[2]
									obj.value=data[index]
									obj.group="粉丝量"
									charts.push(obj)
								})
								charts.sort(function(a,b){
									return new Date(a["text"]) - new Date(b["text"])
								})
								resolve(charts)
							})
						}))
					}
					else{
					promiseArray.push(new Promise((resolve,reject)=>{
						this.$http.get('/ucenter/follow/getMonthFanCount/' +this.$store.getters.userid).then(res =>{
							let data=res.data.result
							let charts=[]
							Reflect.ownKeys(data).forEach(index =>{
								let obj={}
								obj.text=index.split('-')[1]+'/'+index.split('-')[2]
								obj.value=data[index]
								obj.group="粉丝量"
								charts.push(obj)
							})
							charts.sort(function(a,b){
								return new Date(a["text"]) - new Date(b["text"])
							})
							resolve(charts)
						})
					}))		
				}
			}	
			return promiseArray
			},
			getdata(){
				// 昨日评论量
				this.$http.get('/edu/article/comment/getLastCommentCount/'+this.$store.getters.userid).then(res=>{
					
					let {result}=res.data
					this.lastComment=Object.values(result)[0]
				})
				// 昨日点赞量
				this.$http.get('/edu/like/getLastLikeCount/'+this.$store.getters.userid).then(res =>{
					let {result}=res.data
					this.lastLikeCount=Object.values(result)[0]
				})
				// 获取昨日阅读量
				this.$http.get('/edu/view-content/getLastViewCount/'+this.$store.getters.userid).then(res =>{
					let {result}=res.data
					this.lastViewCount=Object.values(result)[0]
				})
				//获取昨日粉丝量
				this.$http.get('/ucenter/follow/getLastFanCount/'+ this.$store.getters.userid).then(res =>{
					let {result}=res.data
					this.lastFanCount=Object.values(result)[0]
				})
				Promise.all(this.getChartsData()).then(res =>{
					this.localdata=res.reduce((pre,cur)=>{
						return [...pre,...cur]
					},[])
				})
			},
			switchtab(index) {
				this.current = index;
				this.getdata()
			},
			onSwiperChange(e){
				this.current=e.detail.current
				this.getdata()
			},
			showOption(){
				this.showOptions=!this.showOptions
			},
			selectOption(item){
				this.value=item
				this.getdata()
			}
		}
	}
</script>

<style>
	.showOptions {
		transition: transform 0.5s ease;
		transform: rotate(0) !important;
	}
	
	 .no-showOptions {
		 transition: transform 0.5s ease;
		transform: rotate(180deg) !important;
	}
	.active{
		background-color: #bbbdbf
	}
	.select-options {
		width: 130rpx;
		position: absolute;		
		pointer-events: none;
		opacity: 0;
		padding: 12rpx 0;
		margin-top: 15rpx;
		border: 2rpx solid #e4e7ed;
		border-radius: 8rpx;
		background-color: #fff;
		box-shadow: #6f6f6f 0rpx 5rpx 15rpx;
		box-sizing: border-box;
		transform-origin: center top;
		z-index: 2238;
		overflow: scroll;
		max-height: 200rpx;
		transform: translateY(-50%);
	}
	.select-options-item {
		padding: 0 10rpx;
		position: relative;
		white-space: nowrap;
		font-size: 24rpx;
		color: #606266;
		height: 30px;
		line-height: 30px;
		box-sizing: border-box;
	}
	.select-active{
		opacity: 1;
		transform: translateY(0);
		animation: open 0.5s linear;
		pointer-events: auto;
	}
	@keyframes open{
		0% {
		opacity: 0;
		transform: translateY(-50%);
		}
		70% {
			opacity: 0;
			transform: translateY(-15%);
		}
		100% {
		opacity: 1;
		transform: translateY(0);}
	}
	.select-noactive{
		animation: close 0.5s linear;
	}
	@keyframes close{
		0% {
		opacity: 1;
		transform: translateY(0);
		}
		30% {
			opacity: 0;
			transform: translateY(-10%);
		}
		}
</style>
